<template>
  <div class="record-qrCode">
    <q-dialog class="record-qrCode dialog" v-model="show" persistent>
      <q-card style="min-width: 600px">
        <q-form @submit="submit" class="q-gutter-md dialog-content">
          <q-card-section>
            <div style="width: 100%;height: 500px" class="scroll">
              <q-table
                :pagination="paginationCode"
                :data="selectOptions"
                :columns="columns"
                row-key="id"
                selection="multiple"
                :selected.sync="selected"
                grid
                hide-header
                hide-bottom
              >

                <template v-slot:item="props">
                  <div
                    class="q-pa-xs col-6 grid-style-transition"
                    :style="props.selected ? 'transform: scale(0.95);' : ''"
                  >
                    <q-card :class="props.selected ? 'bg-grey-2' : ''">
                      <q-card-section>
                        <q-checkbox dense v-model="props.selected" :label="props.row.name" />
                      </q-card-section>
                      <q-separator />
                      <q-list dense>
                        <!--<q-item v-for="col in props.cols.filter(col => col.name !== 'desc')" :key="col.name">-->
                        <!--<q-item-section>-->
                        <!--&lt;!&ndash;<q-item-label>{{ col.label }}</q-item-label>&ndash;&gt;-->
                        <!--<i class="iconfont icontubiao-2"/>-->
                        <!--</q-item-section>-->
                        <!--</q-item>-->
                        <q-item>
                          <q-item-section>
                            <div class="box" style="display: flex" id="printTest">
                              <div class="box-left">
                                <div
                                  style="width: 100%; height: 100%; display: flex;justify-content: center">
                                  <img style="width: 100%" id="img" alt="" :src="props.row.url">
                                </div>
                              </div>
                              <div class="box-right">
                                <label>
                                <span style="display: block; width: 100px" class="text-shenglue">
                                  设备编号:{{ props.row.assetNumber }}
                                  <q-tooltip>设备编号:{{ props.row.assetNumber }}</q-tooltip>
                                </span>
                                  <span style="display: block;width: 100px" class="text-shenglue">
                                  设备名称:{{ props.row.name }}
                                  <q-tooltip>设备名称:{{ props.row.name }}</q-tooltip>
                                </span>
                                  <span style="display: block;width: 100px" class="text-shenglue">
                                  设备类型:{{ props.row.typeName }}
                                     <q-tooltip>设备类型:{{ props.row.typeName }}</q-tooltip>
                                  </span>
                                  <span style="display: block;width: 100px" class="text-shenglue">
                                  设备型号:{{ props.row.model }}
                                   <q-tooltip>设备型号:{{ props.row.model }}</q-tooltip>
                                </span>
                                  <span style="display: block;width: 100px" class="text-shenglue">
                                  设备厂家:{{ props.row.producer }}
                                   <q-tooltip>设备厂家:{{ props.row.producer }}</q-tooltip>
                                </span>
                                </label>
                              </div>
                            </div>
                            <!--<q-item-label>{{ col.label }}</q-item-label>-->
                            <!--<i class="iconfont icontubiao-2"/>-->
                            <!--<span>{{ props.row.name }}</span>-->
                          </q-item-section>
                        </q-item>
                      </q-list>
                    </q-card>
                  </div>
                </template>
              </q-table>
            </div>
          </q-card-section>
          <q-separator />
          <div class="dialog-footer text-center margin-t-10">
            <q-btn outline label="取消" color="primary" @click="$emit('close')" class="q-mr-md" />
            <q-btn unelevated label="确认" color="primary" type="submit" />
          </div>
        </q-form>
      </q-card>
    </q-dialog>
    <div ref="printDiv" style="position: fixed; left: -99999999px; top: 100px; width: 2000px;">
      <!--<div :key="i.id" v-for="i of selected"><img id="imgDom" alt="" :src="i.url"></div>-->
      <div class="boxDom"
           style="display: inline-flex;justify-content: center; width: 500px;margin-bottom: 20px; border: 1px solid #999;margin-left: 20px;padding: 20px; align-items: center;"
           :key="i.id" v-for="i of selected">
        <div class="box-left">
          <div style="width: 200px; height: 200px; display: flex;justify-content: center">
            <img style="width: 100%" alt="" :src="i.url">
          </div>
        </div>
        <div class="box-right">
          <label>
            <span style="display: block">
              设备编号:{{ i.assetNumber }}
            </span>
            <span style="display: block">
              设备名称:{{ i.name }}
            </span>
            <span style="display: block">
              设备类型:{{ i.typeName }}</span>
            <span style="display: block">
              设备型号:{{ i.model }}
            </span>
            <span style="display: block">
              设备厂家:{{ i.producer }}
            </span>
          </label>
        </div>
      </div>
    </div>
    <iframe ref="printDom" style="width: 0; height: 0; border: none;"></iframe>
  </div>
</template>

<script>
import QRCode from 'qrcode'

export default {
  name: 'record-qrCode',
  props: {
    show: {
      type: Boolean,
      default: false,
      required: true
    },
    selectOption: {
      type: Array
    }
  },
  data () {
    return {
      list: [],
      paginationCode: {
        rowsPerPage: 0
      },
      selected: [],
      columns: [
        { name: 'id', label: '设备编号', field: 'id' },
        { name: 'assetNumber', label: '设备编号', field: 'assetNumber' },
        { name: 'name', label: '设备名称', field: 'name' },
        { name: 'typeName', label: '机床类型', field: 'typeName' },
        { name: 'model', label: '设备型号', field: 'model' },
        { name: 'producer', label: '设备型号', field: 'producer' }
      ],

      selectOptions: []
    }
  },
  methods: {

    qrcode (val) {
      const opts = {
        errorCorrectionLevel: 'H',
        type: 'image/jpeg',
        rendererOpts: {
          quality: 0.3
        }
      }
      let urlBase64
      QRCode.toDataURL(val.toString(), opts, function (err, url) {
        if (err) {
          throw err
        }
        urlBase64 = url
      })
      return urlBase64
    },

    // 打印
    submit () {
      let html = this.$refs.printDiv.innerHTML
      this.$refs.printDom.contentWindow.document.body.innerHTML = html
      this.$refs.printDom.contentWindow.print()
    }
  },
  watch: {
    selectOption (val) {
      for (let i = 0; i < val.length; i++) {
        val[i].url = this.qrcode(val[i].id)
      }
      this.selectOptions = val
      this.selected = val
    }
  }
}
</script>

<style scoped lang="stylus">
  /deep/ .q-card > div:not(:last-child), .q-card > img:not(:last-child) {
    padding 5px
  }
  .record-qrCode{
    position absolute
  }
  .box {
    .box-left {
      display flex
      width 49%
      height 110px
      /*border 1px solid red*/
      padding 2% 2%
    }

    .box-right {
      display flex
      justify-content space-between
      width 49%
      height 110px
      /*border 1px solid red*/
      padding 2% 2%
      margin-left 10px

    }
  }

  .boxDom {
    .box-left {
      display flex
      width 120px
      /*border 1px solid red*/
      padding 2% 2%
    }

    .box-right {
      display flex
      justify-content space-between
      align-items center
      width 300px
      height 110px
      /*border 1px solid red*/
      padding 2% 2%
      margin-left 10px

    }
  }

  .text-shenglue {
    display: block;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -icab-text-overflow: ellipsis;
    -khtml-text-overflow: ellipsis;
    -moz-text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
  }

  .text {
    font-size 16px
    width 100px
    color #333
    margin-left 28px
    padding-bottom 20px
  }

  .dialog {
    .dialog-title {
      padding 12px 16px
      line-height 1
      font-size 18px
    }

    .dialog-content {
      .name {
        font-size 16px
        display inline-block
        width 80px
      }
    }
  }

  .grid-style-transition {
    transition transform .28s, background-color .28s
  }
</style>
